<template>
	<d2-container>
		<div slot="header">
			<el-row type="flex" class="row-bg" justify="space-between">
				<el-col :span="5"><div class="grid-content bg-purple">在线充值</div></el-col>
				<el-col :span="3">
					<div class="grid-content bg-purple-light"><el-button type="primary" size="small " icon="el-icon-setting" @click="onSetUp">活动设置</el-button></div>
				</el-col>
			</el-row>
		</div>
		<el-table highlight-current-row style="width: 100%" :data="payData">
			<el-table-column type="index" width="50"></el-table-column>
			<el-table-column property="name" label="名称"></el-table-column>
			<el-table-column property="price" label="充值金额"></el-table-column>
			<el-table-column property="back_price" label="充值返现"></el-table-column>
			<el-table-column property="start_time" label="开始时间"></el-table-column>
			<el-table-column property="end_time" label="结束时间"></el-table-column>
			<el-table-column label="状态">
				<template slot-scope="scope">
					<el-tag v-if="scope.row.state == 1">开启</el-tag>
					<el-tag type="danger" v-if="scope.row.state == 2">关闭</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button type="text" size="small" v-if="scope.row.state == 2" @click="onState(scope.row.id)">开启</el-button>
					<el-button type="text" size="small" v-if="scope.row.state == 1" @click="onState(scope.row.id)">关闭</el-button>
					<el-button type="text" size="small" @click="onUpdate(scope.row.id)">修改</el-button>
					<el-button type="text" size="small" @click="onDel(scope.row.id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页 -->
		<template slot="footer">
			<el-pagination
				@current-change="handleCurrentChange"
				:current-page="page.current"
				layout="total, prev, pager, next, jumper"
				:total="page.total"
				:page-size="page.size"
			></el-pagination>
		</template>
		<!-- 弹窗  活动设置 -->
		<el-dialog :title="title" :visible.sync="dialogVisible" width="500px" :before-close="closeDialog">
			<el-form ref="form" :model="form" label-width="80px">
				<el-form-item label="名称" prop="name" required><el-input v-model="form.name"></el-input></el-form-item>
				<el-form-item label="充值金额" prop="price" required><el-input v-model="form.price"></el-input></el-form-item>
				<el-form-item label="赠送金额" prop="back_price" required><el-input v-model="form.back_price"></el-input></el-form-item>
				<el-form-item label="开始时间" size="small" required prop="start_time">
					<el-date-picker v-model="form.start_time" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd"></el-date-picker>
				</el-form-item>
				<el-form-item label="结束时间" size="small" required prop="end_time">
					<el-date-picker v-model="form.end_time" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd"></el-date-picker>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onSubmit">确定</el-button>
					<el-button @click="closeDialog">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</d2-container>
</template>

<script>
	import {getRecharge,postRechargeAdd,getRechargeState,getRechargeEdit,postRechargeUpdate,getRechargeDel} from '@/api/api'
export default {
	data() {
		return {
			dialogVisible: false, //活动设置
			form: {
				name:'',
				price:'',
				back_price:'',
				start_time:'',
				end_time:''
			},
			page: {
				//分页
				total: 20,
				current: 1,
				size: 10
			},
			tabelData:[],
			id:-1,
			title:"充值活动设置",
			payData:[]

		};
	},
	mounted(){
		this.getPayData()
	},
	methods: {
		getPayData(){
			let data={
				page:this.page.current
			}
			getRecharge(data).then(res=>{
				if(res.state==0){
					this.payData=res.data.data;
					this.page.size = res.data.per_page;
					this.page.total = res.data.total;
				}
			})
		},
		onUpdate(id){

			getRechargeEdit(id).then(res=>{
				if(res.state==0){
					this.form.name=res.data.name;
					this.form.price=res.data.price;
					this.form.back_price=res.data.back_price;
					this.form.start_time=res.data.start_time;
					this.form.end_time=res.data.end_time;
					this.id=id;
					this.dialogVisible=true;
				}
			})
		},
		//提交
		onSubmit(){
			if(this.id==-1){
				if(this.form.name!=''&&this.form.price!=''&&this.form.back_price&&this.form.start_time!=''&&this.form.end_time!=''){
					postRechargeAdd(this.form).then(res=>{
						if(res.state==0){
							this.$message.success("添加成功");
							this.getPayData();
							this.closeDialog()
						}
					})
				}else{
					this.$message.error('内容不能为空')
				}
			}else{
				if(this.form.name!=''&&this.form.price!=''&&this.form.back_price&&this.form.start_time!=''&&this.form.end_time!=''){
					this.form.id=this.id
					let data={
						id:this.id,
						name:this.form.name,
						price:this.form.price,
						back_price:this.form.back_price,
						start_time:this.form.start_time,
						end_time:this.form.end_time
					}
					postRechargeUpdate(data).then(res=>{
						if(res.state==0){
							this.$message.success("修改成功");
							this.getPayData();
							this.closeDialog()
						}
					})
				}else{
					this.$message.error('内容不能为空')
				}
			}
		},
		//关闭弹窗
		closeDialog(){
			this.dialogVisible=false;
			this.$refs.form.resetFields();
		},
		//分页
		handleCurrentChange(val) {
			this.page.current = val;
			this.getPayData();
		},
		//活动设置
		onSetUp(){
			this.id=-1;
			this.dialogVisible=true;
		},
		//状态 开启关闭
		onState(id){
			this.$confirm('此操作将更改此条的状态, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				getRechargeState(id).then(res=>{
					if(res.state==0){
						this.$message.success("更改成功")
						this.getPayData()
					}
				})
			});
		},
		onDel(id){
			this.$confirm('此操作将永久删除, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				getRechargeDel(id).then(res=>{
					if(res.state==0){
						this.$message.success("删除成功")
						this.getPayData()
					}
				})
			});
		}

	}
};
</script>

<style></style>
